<template>
	<view>
		<view class="border-f5f5f5" :class="getClass">
			<!-- 状态栏 -->
			<view :style="'height:' + statusBarHeight + 'px'"></view>
			<!-- 导航栏 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<ferr-icon-button v-if="showBack" @click="back" :icon="'\ue61e'"></ferr-icon-button>
					<ferr-icon-button v-if="showBackTo" @click="backs" :icon="'\ue61e'"></ferr-icon-button>
					<!-- 标题 -->
					<slot>
						<view v-if="title" class="font-md ml-3">
							<!-- <slot name="title"></slot> -->
							{{getTitle}}
						</view>
					</slot>
					<!-- 标题 -->
					<!-- <slot>
						<text v-if="title" class="font-md ml-3">{{getTitle}}</text>
					</slot> -->
				</view>
				
				<!-- 右 菜单 -->
				<view class="flex align-center" v-if="showRight">
					<slot name="right">
						<ferr-icon-button @click="search" :icon="'\ue62d'"></ferr-icon-button>
						<ferr-icon-button @click="openExten" :icon="'\ue616'"></ferr-icon-button>
					</slot>
				</view>
				<view class="flex align-center" v-if="showClose">
					<slot name="right">
						<ferr-icon-button @click="back" :icon="'\ueaf2'"></ferr-icon-button>
					</slot>
				</view>
				<view class="flex align-center" v-if="showCloseRight">
					<slot name="right">
						<ferr-icon-button @click="openExten" :icon="'\ue600'"></ferr-icon-button>
					</slot>
				</view>
				<view class="flex align-center" v-if="showCloseRigh">
					<slot name="right">
						<view style="right: 18px; position: relative; font-size: 18px;" @click="openExten">相册</view>
					</slot>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="fixed" :style="fixedStyle"></view>

		<!-- 扩展菜单 -->
		<free-popup v-if="showCloseRight" ref="extend" :bodyWidth="250" :bodyHeight="getMenusHeight"
			bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="triangle"></view>
			<view class="flex flex-column pt-3 pb-3" style="width:250rpx;" :style="getMenusStyle">
				<view class="flex-1 flex align-center lineHight" hover-class="bg-hover-dark"
					v-for="(item, index) in menus" :key="index" @click="clickEvent(item.path)">
					<text class="iconfont font-md pl-2 pr-2 text-white">{{item.icon}}</text>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import ferrIconButton from "./ferr-icon-button.vue";
	import freePopup from "./free-popup.vue"
	export default {
		props: {
			showBack: {
				type: Boolean,
				default: false
			},
			showBackTo:{
				type: Boolean,
				default: false
			},
			title: {
				type: [String, Boolean],
				default: false
			},
			fixed: {
				type: Boolean,
				default: true
			},
			noreadnum: {
				type: Number,
				default: 0
			},
			bgColor: {
				type: String,
				default: "bg-light"
			},
			showRight: {
				type: Boolean,
				default: false
			},
			showClose: {
				type: Boolean,
				default: false
			},
			showCloseRight: {
				type: Boolean,
				default: false
			},
			showCloseRigh: {
				type: Boolean,
				default: false
			}
		},
		components: {
			ferrIconButton,
			freePopup
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				menus: [{
						name: "转办",
						event: "navigateTo",
						path: '/pages/Transfer/Transfer',
						icon: "\ue627"
					},
					// {
					// 	name:"委办",
					// 	event:"navigateTo",
					// 	path:'/pages/common/search/search',
					// 	icon:"\uea1d"
					// },
				],
			}
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`
			},
			getTitle() {
				let noreadnum = this.noreadnum > 0 ? '(' + this.noreadnum + ')' : ''
				return this.title + noreadnum
			},

			// 动态获取菜单高度
			getMenusHeight() {
				let H = 38
				return this.menus.length * H
			},
			getMenusStyle() {
				return `height: ${this.getMenusHeight}`
			},
			getClass() {
				let fixed = this.fixed ? 'fixed-top' : ''
				return `${fixed} ${this.bgColor}`
			}
		},
		methods: {
			search() {
				uni.navigateTo({
					url: "/pages/common/search/search"
				})
			},
			openExten() {
				this.$emit('openExten')
				this.$refs.extend.show(uni.upx2px(490), uni.upx2px(110))
			},
			// 返回
			back() {
				uni.navigateBack({
					delta: 1
				})
				
			},
			backs(){
				this.$emit('backs');
			},
			clickEvent(path, e) {
				uni.navigateTo({
					url: path,
				});
				console.log(e)
				this.$refs.extend.hide()
				switch (e.event) {
					case 'navigateTo':
						break;
					case 'scan':
						break;
					case 'navigateTo':
						break;
					case 'navigateTo':
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.triangle {
		position: absolute;
		top: -10px;
		right: 10px;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 15px solid rgba(0, 0, 0, 0.3);
		/* 修改颜色为你想要的三角形颜色 */
		z-index: 1040;
	}
</style>